<template>
    <div class="template">
        <div class="search">
            <div>
                <Input clearable 
                    v-model="search.email"
                    placeholder="请输入邮箱"
                    style="width: 310px; margin-right: 10px"
                    icon="ios-search"
                ></Input>
                <Button style="width: 90px" type="primary" icon="ios-search" @click="searchFn">搜索</Button>
            </div>
            <router-link :to="{name: 'add-admin'}">
                <Button type="primary" icon="ios-add">添加管理员</Button>
            </router-link>
        </div>
        <div class="filter">
            <div class="filter-item">
                <span class="title">状态</span>
                <Select clearable  style="width: 200px" placeholder="请选择状态" v-model="search.status">
                    <Option label="全部" value=""></Option>
                    <Option label="启用" value="1"></Option>
                    <Option label="停用" value="0"></Option>
                </Select>
            </div>
            <div class="filter-item">
                <span class="title">姓名</span>
                <Input clearable  style="width: 200px" placeholder="请输入姓名" v-model="search.name"></Input>
            </div>
            <div class="filter-item">
                <Button style="width: 90px" type="primary" icon="ios-search" @click="searchFn">搜索</Button>
                <Button style="width: 90px; margin-left:10px" @click="clearFn">清空</Button>
            </div>
        </div>
        <div class="table">
            <Table border :columns="diyData.columns" :data="apiData.tableList">
                <template slot="footer">
                    <Page
                        :total="apiData.total"
                        show-total
                        :page-size="15"
                        :current="search.pageNo"
                        class-name="footer-page"
                        @on-change="pageChange"
                    ></Page>
                </template>
            </Table>
        </div>
    </div>
</template>

<script>
import {apiAdminList, apiAdminDelete} from '@/api/admin';

export default {
    name: '',
    data() {
        return {
            query: {},
            search: {
                email: '',
                status:'',
                name:'',
                page: 1
            },
            diyDom: {},
            diyData: {
                columns: [
                    {
                        title: 'ID',
                        render: (h, params) => {
                            return h('div',params.index+ 1)
                        }
                    },
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '邮箱',
                        key: 'email'
                    },
                    {
                        title: '状态',
                        key: 'status_text',
                        render: (h,params) => {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: params.row.status == 1 ? 'success' : 'error'
                                    }
                                }),
                                h('span', params.row.status_text)
                            ])
                        }
                    },
                    {
                        title: '添加时间',
                        key: 'created_at'
                    },
                    {
                        title: '操作',
                        fixed: 'right',
                        render: (h, params) => {
                            return h('div', [
                                h(
                                    'a',
                                    {
                                        style: {
                                            marginRight: '10px',

                                            color: '#2D8cF0'
                                        },
                                        on: {
                                            click: () => {
                                                this.$router.push({
                                                    name: 'add-admin',
                                                    query: {
                                                        id: params.row.id
                                                    }
                                                });
                                            }
                                        }
                                    },
                                    '编辑'
                                ),
                                h(
                                    'a',
                                    {
                                        style: {
                                            color: '#E7505A',
                                            paddingLeft: '10px',
                                            borderLeft: params.row.is_super == 1 ? '' : '1px solid #c5c5c5'
                                        },
                                        on: {
                                            click: () => {
                                                this.deleteadmin(params.row.id);
                                            }
                                        }
                                    },
                                    params.row.is_super == 1 ? '' : '删除'
                                )
                            ]);
                        }
                    }
                ]
            },
            apiData: {
                total: 0,
                tableList: []
            }
        };
    },
    methods: {
        // 获取表格数据
        getTableList() {
            this.$store.commit('setSpinShow', true);
            apiAdminList({
                ...this.search
            }).then(res => {
                const {data,meta} = res;
                this.apiData.tableList = data;
                this.apiData.total = meta.pagination.total
            }).finally(() => {
                this.$store.commit('setSpinShow', false);
            });
        },
        // 删除admin
        deleteadmin(id) {
            this.$Modal.confirm({
                title: '提示',
                content: '确认删除当前账号？',
                onOk: () => {
                    setTimeout(() => {
                        apiAdminDelete(id).then(res => {
                            this.$Message.success('删除成功');
                            this.getTableList();
                        });
                    }, 300);
                }
            });
        },
        // 分页
        pageChange(e) {
            this.search.page = e;
            this.getTableList();
        },
        // 搜索
        searchFn() {
            this.search.page = 1;
            this.getTableList();
        },
        // 清空
        clearFn() {
            this.search = {
                email: '',
                status:'',
                name:'',
                page: 1
            };
            this.getTableList();
        }
    },
    mounted() {
        // this.getTableList();
    }
};
</script>

<style scoped lang="less">
.template {
    .search {
        display: flex;
        justify-content: space-between;
    }

    .table {
        margin-top: 10px;
    }
    .filter {
        margin: 10px 0;
        display: flex;
        justify-content: left;
        align-items: center;
        padding: 6px 0 20px 0;
        flex-wrap: wrap;
        border: 1px solid rgba(237, 237, 237, 1);

        .filter-item {
            margin: 14px 0 0 20px;

            .title {
                margin-right: 10px;
                font-size: 14px;
                font-weight: 400;
                color: rgba(74, 74, 74, 1);
                line-height: 17px;
            }
        }
    }
}
</style>
